<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择人员</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../lib/css/style.css">
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../lib/jstree/themes/default/style.min.css">
    <script src="../lib/vue/vue.js"></script>

    <script src="../lib/artTemplate/template-web.js"></script>
    <style>
        .select-user input {
            position: relative;
            z-index: 2;
        }
        .bg {
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            /*width: 100%;*/
            /*height: 100%;*/
            /*z-index: 1;*/
            /*padding-left: 20px;*/
        }
        #app{
            display: flex;
            flex-direction: column;
        }
        .ulist{
            text-align: center;
            flex: 1;
            overflow: auto;
            height: 100%;
        }
        .ulist .item{
            width: 100%;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            color: #666;
        }
        .selected{
            background: #409eff;
            color:white !important;
        }

        .action{
            color: #333;
            font-weight: bold;
        }

        input:checked + .bg {
            /*background: #337ab7;*/
            /*color: white;*/
        }
        .taskHeader{
            height: 30px;
            background: #c4de83;
            border: 1px #9cb269 solid;
            font-weight: bold;
            color: #383838;
            line-height: 23px;
            padding: 0px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <ul id="myTabsBpm" class="nav nav-tabs" role="tablist" style="margin-bottom: 10px;">
        <li class="active"><a href="#select1" class="" role="tab"  data-toggle="tab" aria-controls="taskBpm1" aria-expanded="true" >全部经办人</a></li>
        <li><a href="#select2" role="tab"  data-toggle="tab" aria-controls="taskBpm3" aria-expanded="true" >按流程选择</a></li>
    </ul>


    <!--<div id="content" class="hide">-->
        <!--<div style="width: 500px;margin: 0 auto;">-->
            <!--&lt;!&ndash;<ul id="ulist" style="height: 200px; overflow: auto;margin: 0 auto;">&ndash;&gt;-->
            <!--&lt;!&ndash;</ul>&ndash;&gt;-->
            <!--<div id="ulist">-->
            <!--</div>-->
            <!--<div style="text-align: center; padding-top: 20px;">-->
                <!--<a href="javascript:;" id="submit">确定</a>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <div id="myTabContentBpm" class="tab-content" style="min-height:120px;">
        <div role="tabpanel" class="tab-pane active" id="select1" aria-labelledby="taskBpm1-tab">
            <div class="ulist">
                <div class="taskHeader" >全部经办人</div>
                <div class="action item" @click="cancelAll(selected)">全部删除</div>
                <div class="action item" @click="chooseAll(users)">全部添加</div>
                <div class="action item" :class="{selected: selected[v.uid]}" v-for="v in users" @click="choose(v)">{{v.uname}}</div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="select2" aria-labelledby="taskBpm2-tab" style="">
            <div style="display: flex; flex-direction: row; height: 100%;">
                <div id="jstree_demo" style="overflow:auto;">
                </div>
                <div class="ulist">
                    <div class="taskHeader" >按流程选择</div>
                    <div class="action item" @click="cancelAll(selected)">全部删除</div>
                    <div class="action item" @click="chooseAll(users)">全部添加</div>

                    <div v-for="v in users">
                        <div class="taskHeader">
                            {{v.nodeName}}
                        </div >
                        <div class="item" :class="{selected: selected[v.uid]}"  @click="choose(v)">
                            {{v.uname}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--<span class="i-msg">-->
                        <!--{{item.msg}}-->
                    <!--</span>-->
</body>
</html>
<script type="text/html" id="user">

    <table width="100%" id="table1">
    {{each data item index}}
        <tr>
            <td  style="text-align: center">
                    <div class="bg" id="{{index}}" style="text-align: center;">
                        &nbsp;
                        {{item}}
                    </div>

            </td>
        </tr>
    {{/each}}
    </table>


<!--{{each data item index}}-->
<!--<li>-->
    <!--<label>-->
        <!--<input type="checkbox" class="select-user" name="person" value="{{item.uid}}">-->
        <!--<span name="ss" class="hide">{{item.utname}}</span>-->

        <!--&nbsp;-->
        <!--{{item.msg}}-->
        <!--&nbsp;-->
        <!--{{item.uname}}-->

    <!--</label>-->
<!--</li>-->
<!--{{/each}}-->
</script>
<script>
    var id = location.search.match(/id=([^&]+)/)[1];
    // var id = getParam("id");
    var ids = opener.app.remindAgent;
    var tmpl = template.compile($("#user").html())

    var app = new Vue({
        el: "#app",
        data:{
            users:[],
            selected:{},
        },
        methods:{
            chooseAll(items){
                var t = this;
                items.forEach(function (v) {
                    console.log(v)
                    Vue.set(t.selected, v.uid, v.uname)
                    opener.Vue.set(opener.app.remindAgent, v.uid, v.uname)
                })
                // this.notify()
            },
            cancelAll(items){
                if(items == this.selected){

                    this.selected = {};
                    // this.notify()
                    opener.app.remindAgent = {};
                    return
                }
                var t = this;
                items.forEach(function (v) {
                    Vue.delete(t.selected, v.uid);
                    opener.Vue.delete(opener.app.remindAgent, v.uid)
                });
                // this.notify()
            },
            choose: function (v) {
                if(this.selected[v.uid]){
                    Vue.delete(this.selected, v.uid);
                    opener.Vue.delete(opener.app.remindAgent, v.uid)
                }  else {
                    Vue.set(this.selected, v.uid, v.uname)
                    opener.Vue.set(opener.app.remindAgent, v.uid, v.uname)
                }
                console.log(this.selected)
                // this.notify()
            },
            initUser: function(){
                var t = this;
                $.get("/api/bpm/workflow/logList", {id:id}, function (msg) {
                    if(!msg.success){return}

                    if(msg.data.length){
                        msg.data[0].state = {
                            opened: true
                        }
                    }

                    // var item = {}
                    // for(var i in msg.data){
                    //     item[msg.data[i].uid] = msg.data[i].uname
                    // }
                    t.users = msg.data

                }, 'json')
            }

        },
        mounted: function(){
            this.initUser()
        }

    })
    // $.get("/api/bpm/workflow/logList", {id:id}, function (msg) {
    //     if(msg.success){
    //         if(msg.data){
    //             var item = {}
    //             for(var i in msg.data){
    //                 item[msg.data[i].uid] = msg.data[i].uname
    //             }
    //
    //             $("#ulist").html(tmpl({
    //                 data: item
    //             }));
    //
    //         }
    //
    //         $.each(ids || {},function (i, item) {
    //
    //             $('#table1 .bg').each(function() {
    //                 if($(this).attr("id") == i){
    //                     $(this).css('background-color', '#409eff');
    //                 }
    //             });
    //
    //         })
    //
    //
    //         $('#table1 .bg').click(function(){
    //             if ($(this).css('background-color') === 'rgb(64, 158, 255)') {
    //                 opener.Vue.delete(opener.app.remindAgent, $(this).attr("id"))
    //                 $(this).css('background-color', 'white');
    //             } else {
    //                 $(this).css('background-color', '#409eff');
    //                 opener.Vue.set(opener.app.remindAgent, $(this).attr("id"), $(this).text().trim())
    //             }
    //
    //         });
    //
    //
    //         // $.each(opener.app.users || [],function(i,item){
    //         //     $("input[name='person'][value="+item+"]").attr("checked","checked");
    //         //
    //         // });
    //         $("#content").removeClass("hide");
    //     }
    //
    // },"json")
    //
    // var submitFn = function(){
    //     submit();
    // }
    //
    // $("#submit").unbind("click",submitFn).bind("click",submitFn);
    //
    // function submit() {
    //     var chk_value =[];
    //     var chk_name =[];
    //     $('input[name="person"]:checked').each(function(){
    //         chk_value.push($(this).val());
    //         chk_name.push($(this).next().html().trim());
    //     });
    //     opener.users = chk_value;
    //     opener.app.reUserName = chk_name;
    //     window.close();
    //
    // }



</script>